<template>
  <view>
    <!-- 发票明细 start -->
    <view class="fu-invoice-wrap solid-top">
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title">
          {{ i18n["发票类型"] }}
        </view>
        <view class="fu-invoice-item-info">
          <text>{{ i18n["电子发票"] }}</text>
        </view>
      </view>

      <view class="flex red-item">
        {{ i18n["发票信息"] }}
      </view>

      <view class="flex fu-invoice-item fu-invoice-item-active">
        <view class="fu-invoice-item-title">
          {{ i18n["抬头类型"] }}
        </view>
        <view class="fu-invoice-item-info flex align-center justify-end">
          <label
            class="radio flex align-center justify-end"
            @click="changeRise(1)"
          >
            <radio
              class="radio-scale"
              :color="colorTheme"
              :checked="invoiceData.invoice_type == 1"
              style="transform: scale(0.7)"
            /><text style="margin: 0 40rpx 0 16rpx">{{ i18n["个人"] }}</text>
          </label>
          <label
            class="radio flex align-center justify-end"
            @click="changeRise(2)"
          >
            <radio
              class="radio-scale"
              :color="colorTheme"
              :checked="invoiceData.invoice_type == 2"
              style="transform: scale(0.7)"
            /><text style="margin: 0 0rpx 0 16rpx">{{ i18n["企业"] }}</text>
          </label>
        </view>
      </view>
      <view class="flex fu-invoice-item fu-invoice-item-active">
        <view class="fu-invoice-item-title flex align-center active">
          {{ i18n["发票抬头"] }}
        </view>
        <view class="fu-invoice-item-info">
          <input
            v-if="invoiceData.invoice_type == 1"
            type="text"
            placeholder-class="grey-text"
            v-model="invoice_title_person"
            :placeholder="i18n['发票抬头不能为空']"
          />
          <input
            v-if="invoiceData.invoice_type == 2"
            type="text"
            placeholder-class="grey-text"
            v-model="invoice_title_company"
            :placeholder="i18n['发票抬头不能为空']"
          />
        </view>
      </view>
      <view
        class="flex fu-invoice-item fu-invoice-item-active"
        v-show="invoiceData.invoice_type == 2"
      >
        <view class="fu-invoice-item-title active">
          {{ i18n["公司税号"] }}
        </view>
        <view class="fu-invoice-item-info">
          <input
            type="text"
            placeholder-class="grey-text"
            v-model="invoiceData.invoice_company_duty_paragraph"
            :placeholder="i18n['企业单位税号不能为空']"
          />
        </view>
      </view>
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title">
          {{ i18n["设置为默认抬头"] }}
        </view>
        <view class="fu-invoice-item-info">
          <!-- <switch class='red' @change="defalutRise" :class="invoiceData.invoice_is_default?'checked':''" :checked="invoiceData.invoice_is_default?true:false"></switch> -->
          <checkbox-group class="block" @change="defalutRise">
            <checkbox
              style="transform: scale(0.7)"
              :color="colorTheme"
              class="round"
              :class="invoiceData.invoice_is_default == 1 ? 'checked' : ''"
              :checked="invoiceData.invoice_is_default == 1 ? true : false"
              value="1"
            ></checkbox>
          </checkbox-group>
        </view>
      </view>
    </view>
    <!-- 发票明细 end -->

    <!-- 发票内容 start -->
    <view class="fu-invoice-wrap" style="margin-top: 20rpx">
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title">
          {{ i18n["发票内容"] }}
        </view>
        <view class="fu-invoice-item-info">
          <text>{{ i18n["商品明细"] }}</text>
        </view>
      </view>
    </view>
    <!-- 发票内容 end -->
    <!-- 联系方式 start -->
    <view
      class="flex bg-white align-center fu-invoice-item fu-invoice-item-active"
      style="margin-top: 20rpx"
    >
      <view class="fu-invoice-item-title active">
        {{ i18n["联系方式"] }}
      </view>
      <view class="fu-invoice-item-info">
        <input
          type="text"
		      placeholder-class="grey-text"
          :value="invoiceData.invoice_mobile | mobilePass"
          :placeholder="i18n['请输入手机号']"
          maxlength="11"
          @input="handleInput"
        />
      </view>
    </view>
    <!-- 联系方式 end -->
    <!-- 电子邮箱 start -->
    <view class="flex bg-white align-center fu-invoice-item">
      <view class="fu-invoice-item-title">
        {{ i18n["电子邮箱"] }}
      </view>
      <view class="fu-invoice-item-info">
        <input
          type="text"
          placeholder-class="grey-text"
          v-model="invoiceData.invoice_email"
          :placeholder="i18n['请输入电子邮箱']"
        />
      </view>
    </view>
    <!-- 电子邮箱 end -->

    <!-- 确认按钮 start -->
    <button  type="warn" class="submit-btn" @click="submitClick">
      <text>{{ i18n["提交"] }}</text>
    </button>
    <!-- 确认按钮 end -->
  </view>
</template>

<script>
import { validate } from "@/common/utils/index.js";
export default {
  data() {
    return {
      invoiceData: {
        invoice_type: 1, //1个人2企业
        invoice_title: "", //抬头
        invoice_company_duty_paragraph: "", //税号
        invoice_mobile: this.$store.getters.userInfo._mobile, //联系方式
        invoice_email: "", //电子邮件
        invoice_is_default: "1", //默认抬头
      },
      type: 0,//type为时说明是确认订单页进来
      isClick: false, // {Boolean} 是否展开企业发票明细
      showPhone: "", //用来展示的手机号
      order_sn:'', //订单号
      payable_money:'',//发票金额
      isEdit:'',
      invoice_title_person:'',//个人默认抬头
      invoice_title_company:'',//企业默认抬头
      isPerson:true, //进入页面，塞入默认抬头（个人）
      isCompany:true,//进入页面，塞入默认抬头（企业）
    };
  },
  filters: {
    mobilePass(val){
      if(validate(val, "phone")){
        return val.substr(0, 3) + "****" + val.substr(-4);
      }
      return val;
    }
  },
  onLoad(option) {
    this.setNavigationBarTitle(this.i18n["申请开票"]);
    console.log(option);
    let { type, invoice,order_sn,payable_money,status} = option;
    let invoiceData ;
	  // 确认订单页过来，这时需要注意该页面是不调用接口的，信息都是返回确认订单页
    if(invoice){
      invoiceData = JSON.parse(invoice);
    }

    if (type == 1) {
      this.type = type;
      if(invoiceData && invoiceData.invoice_title){
        this.invoiceData = invoiceData;
      }
    }else{
      // 这里是我的订单跳转而来，此时会携带order_sn订单号，payable_money订单金额，status发票状态，0未开票，1已申请，2已开票
      this.order_sn = order_sn;
      this.payable_money = payable_money;
      // this.getInvoiceData(order_sn);
	  }
    // 默认抬头设置
    if(this.$store.state.userInfo.invoice_title) this.invoice_title_person =  this.$store.state.userInfo.invoice_title;
    if(this.$store.state.userInfo.invoice_company_title) this.invoice_title_company =  this.$store.state.userInfo.invoice_company_title;
    // 若传值进入则重新赋值
    if(invoiceData && invoiceData.invoice_title){
      if(invoiceData.invoice_type == 1){
        this.invoice_title_person = invoiceData.invoice_title;
      }else{
        this.invoice_title_company = invoiceData.invoice_title;
      }
    }
  },
  methods: {
    handleInput(e){
      this.invoiceData.invoice_mobile = e.detail.value;
    },
    /**
     * @description 手机号过滤中间四位用*代替
     */
    filterMobile() {
      if (!this.invoiceData.invoice_mobile) return "";
      let phone = this.invoiceData.invoice_mobile;
      if (!validate(phone, "phone")) {
        this.$message.info(this.i18n["请检查手机号"]);
      } else {
        this.showPhone = phone.substr(0, 3) + "****" + phone.substr(-4);
      }
    },
    defalutRise(e) {
      this.invoiceData.invoice_is_default =
        e.detail.value[0] == 1 ? e.detail.value[0] : 2;
      // console.log(this.invoiceData.invoice_is_default);
    },
    /**
     * @event
     * @description 点击提交按钮
     */

    submitClick() {
      if(this.invoiceData.invoice_type == 1){
          this.invoiceData.invoice_title = this.invoice_title_person;
        }else{
          this.invoiceData.invoice_title = this.invoice_title_company;
        }
      if (!this.invoiceData.invoice_title.trim()) {
        this.$message.info(this.i18n["请输入发票抬头"]);
        return;
      }
      if (this.invoiceData.invoice_type == 2) {
        if (!validate(this.invoiceData.invoice_company_duty_paragraph, "paragraph")) {
          this.$message.info(this.i18n["输入税号有误"]);
          return;
        }
      }
      if (!this.invoiceData.invoice_mobile.trim()) {
        this.$message.info(this.i18n["请输入联系方式"]);
        return;
      }
      if (!validate(this.invoiceData.invoice_mobile, "phone")) {
        this.$message.info(this.i18n["请检查手机号"]);
        return;
      }
      if (
        this.invoiceData.invoice_email.trim() &&
        !validate(this.invoiceData.invoice_email, "email")
      ) {
        // 如果邮箱格式不正确时做点什么
        this.$message.info(this.i18n["请检查邮箱"]);
        return;
      }
      let  invoice_info = {
        invoiceData:this.invoiceData,
        type:this.type,
        order_sn:this.order_sn || 0,
        payable_money:this.payable_money || 0
      }
      uni.navigateTo({
        url:'/pages/invoice/invoice/apply-invoice-sure/index?invoice_info='+JSON.stringify(invoice_info)
      })
      // this.getInvoice(this.invoiceData);
	  // if(this.type == 1){
		 //  	uni.$emit("select_invoice", this.invoiceData);
   //    		uni.navigateBack();
	  // }else{
		 //  this.getInvoice(this.invoiceData);
	  // }

    },
    /**
     * @event
     * @description 选择抬头类型
     * @param {Number} type - 1：个人或事业单位；2：企业；
     */
    changeRise(type) {
      this.invoiceData.invoice_type = Number(type);
    },
	/**
       * @description 发票申请
       * @param {Object} data 入参
       */
      getInvoice(data) {
        console.log(data);
        data.order_sn = this.order_sn;
        console.log(this.order_sn)
        data.invoice_price = Number(this.payable_money);

        for(let item in data){
          if(data[item] == null ){
            delete data[item]
          }
        }
        if (this.isEdit) {
          this.$api
          .post(global.apiUrls.invoiceUpdate, data)
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              this.$message.success(this.i18n['修改成功']);
              setTimeout(() => {
                uni.$emit('onPageUpdata', { type: 5, data: { itemIndex: this.itemIndex },order_sn:this.order_sn, msg: this.i18n['发票'] });
                uni.navigateBack({
                  delta: 1
                });
              }, 800);
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });

        }else{
          this.$api
          .post(global.apiUrls.postInvoiceApply, data)
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              this.$message.success(this.i18n['申请成功']);
              setTimeout(() => {
                uni.$emit('onPageUpdata', { type: 5, data: { itemIndex: this.itemIndex }, msg: this.i18n['发票'] });
                uni.navigateBack({
                  delta: 1
                });
              }, 800);
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });

        }
      },
      /**
       * @description 获取发票详情   如果是修改发票  获取发票原来填写的信息
       * @param {String} order_sn 订单号
       */
      getInvoiceData(order_sn) {
        this.$api
          .post(global.apiUrls.pistInvoiceSelect, { order_sn: order_sn })
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {

            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
  },
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}
.fu-invoice-wrap {
  // padding: 0 32rpx;
  box-sizing: border-box;
  background: #ffffff;
}

.fu-invoice-item {
  height: 108rpx;
  padding: 0 32rpx;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 10rpx;
  position: relative;

  .fu-invoice-item-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #202020;
    position: relative;
    height: 108rpx;
    line-height: 108rpx;
    padding-left: 20rpx;
    &.active {
      &::before {
        content: "*";
        position: absolute;
        left: 0rpx;
        top: 2rpx;
        color: #fa2033;
      }
    }
  }

  .fu-invoice-item-info {
    flex: 2;
    text-align: right;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    input {
      font-size: 32rpx;
      text-align: right;
    }
  }
}
.red-item {
  // width: 750rpx;
  height: 88rpx;
  background: rgba(255, 100, 100, 0.1);
  font-size: 28rpx;
  font-weight: bold;
  line-height: 88rpx;
  color: #ff6464;
  padding-left: 52rpx;
}
// 下面带线条
.fu-invoice-item-active {
  &:after {
    content: "";
    width: 686rpx;
    height: 1rpx;
    border-bottom: 2rpx solid #eeeeee;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
}
.grey-text {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #bfbfbf;
}
.font-24 {
  font-size: 24rpx;
}

.submit-btn {
  position: fixed;
  bottom: 40rpx;
  bottom: calc(40rpx + constant(safe-area-inset-bottom));
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  border-radius: 48rpx;
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: $bgtheme;

  // margin-top: 40rpx;
}
</style>
